import React, { Component } from 'react'
import { hashHistory } from 'react-router'
import { ReturnHeader } from '../header'
import { Button, InputItem, List, Picker, Toast } from 'antd-mobile'
import { createForm } from 'rc-form'
import { config, myFetch, helper } from 'appRoot/components/utils'


const banks =[
    {
      label: '中国银行',
      value: 'COB',
    },
    {
      label: '中国建设银行',
      value: 'CCB',
    },
  ]

class BingdingCard extends Component {
  render() {
    const { form: {getFieldProps} } = this.props
    const mobile = sessionStorage.mobile
    return (
      <div className="rt-binding-card">
        <ReturnHeader title="绑定银行卡"/>
        <h2>账户：{mobile.slice(0, 3) + '****'+mobile.slice(-4)}</h2>
        <div className="cm-scrollable-container cm-padding-top24">
          <Picker
            data={banks}
            extra="选择银行"
            cols={1}
            {...getFieldProps('bank')}
          >
            <List.Item arrow="down" className="cm-picker-item"/>
          </Picker>
          <InputItem
            {...getFieldProps('cardNumber', {
              initialValue: '',
            })}
            type="bankCard"
            placeholder="请输入借记卡卡号"
            clear
          />
          <InputItem
            {...getFieldProps('accountName', {
              initialValue: '',
            })}
            placeholder="请输入持卡人姓名"
            clear
          />

          <Button className={`cm-main-button`} onClick={(e)=>this.doBind()}>绑定</Button>
        </div>
      </div>
      )
  }

  doBind() {
    const { getFieldProps, getFieldValue } = this.props.form
    let cardNumber = getFieldValue('cardNumber')
    if (!cardNumber) {
      Toast.fail('请输入手机号码', 1.2)
      return
    }
    cardNumber = cardNumber.replace(/\s/g, '')
    const accountName = getFieldValue('accountName')
    if (!accountName) {
      Toast.fail('请输入持卡人姓名', 1.2)
      return
    }
    const bank = getFieldValue('bank')
    if (!bank || !bank[0]) {
      Toast.fail('请选择发卡银行', 1.2)
      return
    }
    const options = {
      method: 'POST',
      body: JSON.stringify({
        cardNumber,
        accountName,
        bank: bank[0]
      })
    }
    myFetch(`${config.rootApi}/user/bindcard`, options, true)
      .then((rs) => {
        if (rs && rs.value) {
          Toast.success(rs.value, 2)
          hashHistory.push('/account')
        }
      })
  }
}

export default createForm()(BingdingCard)